<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" /> 
  <meta name="Keywords" content="" /> 
  <meta name="description" content="" /> 
  <meta name="viewport" content="width=device-width,initial-scale=1.0" /> 
  <meta content="width=640,target-densitydpi=device-dpi,user-scalable=no" name="viewport" /> 
  <title>神探闯关</title> 
  <link type="text/css" rel="stylesheet" href="css/style.css" /> 
<!--     <link type="text/css" rel="stylesheet" href="css/myanimate.css">-->
  <script type="text/javascript" src="js/jquery-1.11.2.js"></script> 
  <script type="text/javascript" src="js/game1.js"></script>
 </head>
 <body>
     
<!--    游戏失败-->
  <div class="submit_success game_fail"> 
   <div class="submit_success_con center success_p"> 
    <div class="submit_success_close right">
     <img src="images/info_close.png" />
    </div> 
    <div class="clear"></div> 
    <p><img src="images/game_fail.png" /></p> 
    <p>未能找到本尼走的<span>最短</span>路径</p> 
    <p>快快开启你的侦探大脑<br/>
经过5个轮胎<br/>
用<span>最短</span>步数抵达终点吧！</p> 
    <p> <img src="images/success_btn1.jpg" /> </p> 
   </div> 
  </div>
<!--     没有集齐所有轮胎-->
  <div class="submit_success game_notfull"> 
   <div class="submit_success_con center success_p"> 
        <p style="margin-top:320px;"><img src="images/not_full.png" /></p> 
   </div> 
  </div>
   <script type="text/javascript">
              $(".submit_success_close").click(function(){
                $(".submit_success").hide();
              });
              $(".game_notfull").click(function(){
                $(".game_notfull").hide();
              });        
        </script>    
  <div class="warp"> 
   <header> 
    <div class="game1_header"> 
     <div class="left"> 
      <img src="images/index_logo.png" width="188" /> 
     </div> 
     <div class="left"> 
      <img src="images/title3.png" width="392" /> 
     </div> 
    </div>
    
    <div class="game3_board">
       <div class="game3_time">0</div>
       <ul>
<!--
        <li>              
            <img src="images/3_1.png"> 
            <img src="images/3_0.png">
        </li>
        <li>
            <img src="images/3_2.png"> 
            <img src="images/3_0.png">
        </li>
        <li>
            <img src="images/3_3.png"> 
            <img src="images/3_0.png">  
        </li>
        <li>
            <img src="images/3_4.png"> 
            <img src="images/3_0.png">  
        </li>
        <li>
            <img src="images/3_5.png"> 
            <img src="images/3_0.png">   
        </li>
        <li>
            <img src="images/3_6.png"> 
            <img src="images/3_0.png">  
        </li>
        <li>
            <img src="images/3_7.png"> 
            <img src="images/3_0.png">   
        </li>
        <li>
            <img src="images/3_8.png"> 
            <img src="images/3_0.png">   
        </li>
        <li>              
            <img src="images/3_1.png"> 
            <img src="images/3_0.png">
        </li>
        <li>
            <img src="images/3_2.png"> 
            <img src="images/3_0.png"> 
        </li>
        <li>
            <img src="images/3_3.png"> 
            <img src="images/3_0.png">  
        </li>
        <li>
            <img src="images/3_4.png"> 
            <img src="images/3_0.png">  
        </li>
        <li>
            <img src="images/3_5.png"> 
            <img src="images/3_0.png">   
        </li>
        <li>
            <img src="images/3_6.png"> 
            <img src="images/3_0.png">  
        </li>
        <li>
            <img src="images/3_7.png"> 
            <img src="images/3_0.png">   
        </li>
        <li>
            <img src="images/3_8.png"> 
            <img src="images/3_0.png">   
        </li>
-->
       </ul>
       
    </div>
       
   </header> 
  </div> 
  <script type="text/javascript">
      var game3Timer = 0;//每隔一秒加一
      var timerOpen = false;//计时开关
      var array = [];//生成随机的八个数
      var clickOpen = false;//展示动画结束后才可以点击翻牌
      var array1 = [];//记录被翻过的牌的编号
      var point = null;//当前被点击的编号
      
    //生成随机1~8的数组函数
     function fnLuanXu(num) {  
        var aLuanXu=[];  
        for (var i = 0; i < num; i++) {  
            aLuanXu[i] = i+1;  
        }  
        for (var i = 0; i < num; i++) {  
            var iRand = parseInt(num * Math.random());  
            var temp = aLuanXu[i];  
            aLuanXu[i] = aLuanXu[iRand];  
            aLuanXu[iRand] = temp; 
        }  
        return aLuanXu;  
     }
      
	  var h=0; //用来标示每一个图片 用于判断两次是否点击同一张图片
      //生成第一排表情
      array = fnLuanXu(8);
      for(var i = 0; i<8;i++){
        $(".game3_board ul").append("<li d="+(h++)+" title="+array[i]+"><img src='images/3_"+array[i]+".png'><img src='images/3_0.png'></li>");          
      }
      //生成第二排表情
      array = fnLuanXu(8);
      for(var i = 0; i<8;i++){
        $(".game3_board ul").append("<li d="+(h++)+" title="+array[i]+"><img src='images/3_"+array[i]+".png'><img src='images/3_0.png'></li>");          
      }
      
      //一秒钟的表情展示时间
      setTimeout(function(){
        $(".game3_board li").each(function(){
            $(this).removeClass("close").addClass("open");
        });
      },1000);
      setTimeout(function(){
        $(".game3_board li").each(function(){
            $(this).removeClass("open").addClass("close");
        });
        clickOpen = true;        
      },3000);
      
        var lastTitle=null;
		var lastClick=null;
		var count=0;
		var obj={};
        $(".game3_board li").click(function(){            
            
            if(clickOpen){            
                point = $(this).attr("title");// 获取被点击表情的编号
                cp=$(this);
				

				var c=cp.attr("d");

				//判断上次点击的和这次点击的是不是同一张图片
				if(lastTitle != null&&c==lastClick.attr("d")){

					return ;
				}
				//判断是否已经打开 如果已经是打开的 双击直接忽略 
				if(obj[''+c]==1){
				 
				return ;

				}


                $(this).removeClass("close").addClass("open").addClass("on");//翻开
				 
                if(lastTitle == null){//第一次点击

				  if(!timerOpen){//游戏计时开关打开
						timerOpen = true;
						startTime();
					}

                    lastTitle=point;
					lastClick=$(this);
                    $(".game3_board li").removeClass("on");
                    
                }else if(point == lastTitle ){//两个表情一样

					obj[''+lastClick.attr("d")]=1;  //配对成功 将两个都标志位 已经打开
					obj[''+cp.attr("d")]=1;			//配对成功 将两个都标志位 已经打开

					count+=2;
					 
					if(count==16){//16个牌子都ok 了                        
                        clearInterval(timer);
                        setTimeout(function(){
                            document.location.href = "success3.html";            
                        },2000);
					}

                    lastTitle=null;
					lastClick=null;
                    /*
					setTimeout(function(){                    
                    $(".game3_board li.on").removeClass("on");
					    
						

                    },2000);*/
                    
                }else{//两个表情不一样
					 clickOpen = false;
					 setTimeout(function(){  
					   
						lastClick.removeClass("on").removeClass("open").addClass("close");//合上
						cp.removeClass("on").removeClass("open").addClass("close");//合上

						lastTitle=null;
						lastClick=null;
						clickOpen = true;

                    },1000);
					
					
                }
            }
            
            
            
            
            
          
        }); 
    
        
    //游戏计时函数
    function startTime(){
    	var h=0;
    	window.timer=setInterval(function(){
    		h++;
    		$(".game3_time").text(h);
    	}, 1000);
    	
    }
        
        
        
        
      
      
      
  </script>
     <script type="text/javascript">
        $(window).load(function(){
            $("<link>").attr({ rel: "stylesheet", type: "text/css",href: "css/myanimate.css" }).appendTo("head");  
        });
     </script>
 </body>
</html>